<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!-- http://tomtheisen.com/spread/ -->
    <title>spread</title>
<style>
html, body { background-color: black; color: white; }
</style>
<script src="../canvas.vml.js"></script>
<script src="../canvas.js"></script>

    <script type="text/javascript">
        var startradius = 20;
        var width = 600;
        var height = 600;
        var frame_time = 30;
        var straighten_factor = 0.95;
        var curviness = 0.2;
        var color_speed = 0.03;
        var new_branch_frames = 20;
        var branch_shrink = 0.95;
        var branch_opacity = 0.4;

        var paper;
        var branches = [];
        var direction_offset = 0;
        var frame = 0;
        var fadecheck;
        var cyclecheck;
        var randomizecheck;
        var wrapcheck;

        function paper_click(event) {
            create_tree(event.pageX - paper.canvas.offsetLeft, event.pageY - paper.canvas.offsetTop);
        }

        function create_tree(x, y) {
            branches.push(new Branch(x, y, 0, startradius));
            branches.push(new Branch(x, y, Math.PI * 2 / 3, startradius));
            branches.push(new Branch(x, y, Math.PI * 4 / 3, startradius));
        }

        function Branch(x, y, direction, radius) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.original_radius = radius;
            this.direction = direction;
        }

        function clock_tick() {
            if (fadecheck.checked) {
                paper.fillRect(0,0,width,height);
            }

            if (cyclecheck.checked) {
                r = Math.floor(Math.sin(frame * color_speed) * 128 + 128)
                g = Math.floor(Math.sin(frame * color_speed + Math.PI * 2 / 3) * 128 + 128)
                b = Math.floor(Math.sin(frame * color_speed + Math.PI * 4 / 3) * 128 + 128)
                paper.strokeStyle = "rgba(" + r + "," + g + "," + b + ", " + branch_opacity + ")";
            }

            if(++frame % new_branch_frames == 0) {
                if (randomizecheck.checked) {
                    x = (Math.random() + 0.1) * width * 0.8;
                    y = (Math.random() + 0.1) * height * 0.8
                    create_tree(x, y);
                } else {
                    create_tree(width / 2, height / 2);
                }
            }

            direction_offset += Math.random() * curviness - curviness / 2;
            direction_offset *= straighten_factor;

            for (var i = branches.length - 1; i >= 0; i--) {
                var branch = branches[i];

                paper.beginPath();
                paper.lineWidth = branch.radius;
                paper.moveTo(branch.x, branch.y);

                branch.radius *= branch_shrink;
                branch.direction += direction_offset;
                branch.x += Math.cos(branch.direction) * branch.radius;
                branch.y += Math.sin(branch.direction) * branch.radius;

                paper.lineTo(branch.x, branch.y);
                paper.stroke();

                if (wrapcheck.checked) {
                    if (branch.x > width) branch.x -= width;
                    if (branch.x < 0) branch.x += width;
                    if (branch.y > height) branch.y -= height;
                    if (branch.y < 0) branch.y += height;
                }

                if (branch.radius < branch.original_radius / 2) {
                    branches.splice(i, 1);
                    var new_radius = branch.original_radius / 2;
                    if (new_radius > 1) {
                        branches.push(new Branch(branch.x, branch.y, branch.direction,     new_radius));
                        branches.push(new Branch(branch.x, branch.y, branch.direction + 1, new_radius));
                    }
                }
            }
        }

        function oncanvasready(canvases) {
            fadecheck = document.getElementById("fadecheck");
            cyclecheck = document.getElementById("cyclecheck");
            randomizecheck = document.getElementById("randomizecheck");
            wrapcheck = document.getElementById("wrapcheck");

            paper = canvases[0].getContext("2d");
            paper.fillStyle = "rgb(0,0, 0)";
            paper.fillRect(0,0,width,height);
            paper.fillStyle = "rgba(0,0, 0, 0.005)";

            paper.strokeStyle = "rgba(128,128,64," + branch_opacity + ")";
            document.getElementById("notepad").onclick = paper_click;
            document.getElementById("branchframestext").onblur = function() {new_branch_frames = parseInt(this.value);};

            document.title = "Backend: " + (paper.xBackend || "Canvas");

            paper.xFlyweight = 1;


            setInterval(clock_tick, frame_time);
        }

/*
function switchBackend() {
    var n = window.name || "";

    if (!n) {
        window.name = "flash";
    } else {
        switch (n) {
        case "sl":      window.name = "flash"; break;
        case "flash":   window.name = "vml"; break;
        case "vml":     window.name = "sl"; break;
        }
    }
    location.reload(false);
}
function xboot() {
    uu.id("notepad").className = window.name || "sl";
}
 */

    </script>
  </head>
  <body>
        <input type="checkbox" id="cyclecheck" checked="checked" /> <label for="cyclecheck">Cycle colors</label>
        <input type="checkbox" id="fadecheck" /> <label for="fadecheck">Fade</label>
        <input type="checkbox" id="randomizecheck" /> <label for="randomizecheck">Randomize Position</label>
        <input type="checkbox" id="wrapcheck" /> <label for="wrapcheck">Wrap Edges</label>
        <br />
        <label for="branchframestext">Spawn new every n frames:</label> <input type="text" id="branchframestext" value="20" size="3" />
<!--
        <input type="button" value="Silverlight/Flash/VML" onclick="switchBackend()" />
 -->
        <br />

    <canvas id="notepad" width="600" height="600"></canvas>
    <p>
        I love feedback.  canvas@tomtheisen.com
    </p>
  </body>
</html>
